<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会基本信息设置
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">设置自动记分标准</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="jf-card">
            <div class="jf-top">
                <el-form style="width: 160px;">
                    <el-form-item label="组别：">
                        <el-select v-model="groupName" @change="groupChange">
                            <el-option v-for="(item, index) in selgroup" :key="index + 1" :label="item.name"
                                :value="item.grid"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="cosp3">
                    <el-button type="primary" @click="editMeminfo">修改</el-button>
                </div>
            </div>
            <div class="jf-one">
                <el-col :span="24">
                    <div class="grid-men">
                        1.名次加分（并列名次计分方式：
                        <el-radio-group v-model="inputFrom.rmd">
                            <el-radio :label="0">平均</el-radio>
                            <el-radio :label="1">取高</el-radio>
                            <el-radio :label="2">取低</el-radio>
                        </el-radio-group>
                        ）
                    </div>
                </el-col>
                <div class="boss-ma">
                    <div class="ma-bj">
                        <div class="mc-name">名次：</div>
                        <div class="mingci">
                            <div class="rank-sor" v-for="sor in sorbafrom">{{ sor }}</div>
                        </div>
                    </div>
                    <div class="ma-bj">
                        <div class="mc-name">分值：</div>
                        <div class="mingci">
                            <el-input v-model="inputFrom.rnk1"></el-input>
                            <el-input v-model="inputFrom.rnk2"></el-input>
                            <el-input v-model="inputFrom.rnk3"></el-input>
                            <el-input v-model="inputFrom.rnk4"></el-input>
                            <el-input v-model="inputFrom.rnk5"></el-input>
                        </div>
                    </div>
                </div>
                <div class="boss-ma">
                    <div class="ma-bj">
                        <div class="mc-name">名次：</div>
                        <div class="mingci">
                            <div class="rank-sor" v-for="sor2 in sorbafrom2">{{ sor2 }}</div>
                        </div>
                    </div>
                    <div class="ma-bj">
                        <div class="mc-name">分值：</div>
                        <div class="mingci">
                            <el-input v-model="inputFrom.rnk6"></el-input>
                            <el-input v-model="inputFrom.rnk7"></el-input>
                            <el-input v-model="inputFrom.rnk8"></el-input>
                            <el-input v-model="inputFrom.rnk9"></el-input>
                            <el-input v-model="inputFrom.rnk10"></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <div class="jf-two">
                <el-col :span="24">
                    <div class="grid-men">
                        2.破（平）记录加分
                    </div>
                </el-col>
                <div class="boss-ma">
                    <div class="ma-bj">
                        <div class="mc-name"></div>
                        <div class="mingci">
                            <div class="rank-sor">记录1</div>
                            <div class="rank-sor">记录2</div>
                            <div class="rank-sor">记录3</div>
                        </div>
                    </div>
                    <div class="ma-bj">
                        <div class="mc-name">平记录：</div>
                        <div class="mingci">
                            <el-input v-model="inputFrom.bk1"></el-input>
                            <el-input v-model="inputFrom.bk2"></el-input>
                            <el-input v-model="inputFrom.bk3"></el-input>
                        </div>
                    </div>
                </div>
                <div class="boss-ma">
                    <div class="ma-bj">
                        <div class="mc-name">破纪录：</div>
                        <div class="mingci">
                            <el-input v-model="inputFrom.br1"></el-input>
                            <el-input v-model="inputFrom.br2"></el-input>
                            <el-input v-model="inputFrom.br3"></el-input>
                        </div>
                    </div>
                </div>
            </div>

            <div class="jf-therr">
                <el-col :span="24">
                    <div class="grid-men">
                        3.加分加倍
                    </div>
                </el-col>
                <div class="boss-ma">
                    <div class="ma-bj">
                        <div class="mc-name"></div>
                        <div class="mingci">
                            <div class="rank-sor">一般项目</div>
                            <div class="rank-sor">接力项目</div>
                            <div class="rank-sor">全能项目</div>
                        </div>
                    </div>
                    <div class="ma-bj">
                        <div class="mc-name"></div>
                        <div class="mingci">
                            <el-input v-model="inputFrom.ad1"></el-input>
                            <el-input v-model="inputFrom.ad2"></el-input>
                            <el-input v-model="inputFrom.ad3"></el-input>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selgroup: [],
            sorbafrom: {
                merank: '第一名',
                merank2: '第二名',
                merank3: '第三名',
                merank4: '第四名',
                merank5: '第五名',
            },
            sorbafrom2: {
                merank: '第六名',
                merank2: '第七名',
                merank3: '第八名',
                merank4: '第九名',
                merank5: '第十名',
            },
            inputFrom: [],
            groupName: null,
            radio: 9,
        }
    },
    created() {
        this.postGroupNameinfoList();
    },
    methods: {
        // 查询
        async postGroupNameinfoList() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/match/getGroupmsg');
                if (result.data.code == 0) {
                    this.selgroup = result.data.data
                    this.groupName = this.selgroup[0].grid
                    this.getGroupNameinfoList();
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async getGroupNameinfoList() {
            const result = await this.$http.get(this.BACKEND_URL + '/auto/getmsg', { params: { grid: this.groupName } });
            if (result.data.code == 0) {
                this.inputFrom = result.data.data
                if (this.inputFrom === null) {
                    this.inputFrom = []
                }
            } else if (result.data.code == 500) {
                this.inputFrom = []
                console.log(result.data.msg)
            }
        },
        //修改
        async editMeminfo() {
            const result = await this.$http.post(this.BACKEND_URL + '/auto/updatemsg', this.inputFrom)
            if (result.data.code == 0) {
                window.location.reload();
            } else if (result.data.code == 500) {
                this.postGroupNameinfoList()
                this.$message.error(result.data.msg)
            }
        },
        groupChange(val) {
            this.groupName = val
            this.getGroupNameinfoList()
        },
    }
}
</script>

<style lang="less" scoped>
.jf-card {
    margin-top: 15px;
}

.jf-select {
    border-bottom: 1px solid #cdd1d6;
}

// 第二个
.jf-two {
    margin-top: 30px;

    .grid-men {
        text-align: left;
        margin-left: 10px;
        font-weight: bold;
    }
}
// top
.jf-top{
    display: flex;
}
.cosp3{
    margin-left: 10px;
}

// 第一个
.jf-one {
    margin-top: 15px;

    .grid-men {
        text-align: left;
        margin-left: 10px;
        font-weight: bold;
    }
}

.jf-therr {
    margin-top: 30px;

    .grid-men {
        text-align: left;
        margin-left: 10px;
        font-weight: bold;
    }
}

.mingci {
    flex: 1;
    grid-template-columns: repeat(5, 1fr);
    display: grid;
    box-sizing: border-box;
    grid-gap: 15px;

    .rank-sor {
        width: 80px;
    }

    .el-input {
        width: 80px;
        text-align: center;
    }
}

// ome 分值名次
.boss-ma {
    margin-top: 30px;

    .ma-bj {
        margin-top: 10px;
        display: flex;

        .mc-name {
            width: 150px;
        }
    }
}
</style>